<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>来电记录</title>
    <link rel="stylesheet" href="/Public/css/gxxjkefu-normalize.css">
    <link href="/Public/css/animate.css" rel="stylesheet">
    <link rel="stylesheet" href="/Public/css/model.css">
    <link rel="stylesheet" href="/Public/css/pager.css">
    <style>
        .user_name{
            cursor: pointer;
            color: black;
        }
        .user_name:hover{
            color: #31b0d5;
        }

        .select_div select{
            width: 20%;
            margin: 20px;
            float: right;
        }

        .notice_info {
            padding: 25px 0 3%;
            line-height: 35px;
            color: #979797;
            float: left;
            width: 100%;
            background: #ffffff;
        }

        .feedback_ul {
            text-align: center;
            margin: 0 auto 50px;
        }

        .feedback_ul li {
            text-align: center;
            display: inline-block;
            margin: 0 30px;
        }

        .feedback_ul li a {
            color: black;
            padding: 0 0 10px;
        }

        .feedback_ul .a_active {
            color: #57bee9;
            border-bottom: solid 2px #57bee9;
        }

        .search_table thead {
            background: #f0f8fa;
            border: none;
        }

        .table {
            color: #000000;
            margin: 0 auto;
            width: 100% !important;
            text-align: center;
        }

        .search_table input {
            background: none;
            border: none;
        }

        .table > thead > tr > th {
            border-bottom: none !important;
            text-align: center !important;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            border-top: 1px solid #f0f8fa !important;
            text-align: center !important;
        }

        .remark_div {
            color: black;
            height: 340px;
            width: 90%;
            margin: 200px auto 0;
            position: relative;
        }

        .remark_div input {
            position: absolute;
            right: 0;
            bottom: 0;
            background: #ff815a;
            border-radius: 3px;
            border: none;
            color: white;
            margin-top: 20px;
            width: 200px;
            height: 40px;
        }

        .remark_div textarea {
            background: #f5f5f5;
            border: none;
            padding: 1%;
        }
        .record_build{
            cursor: pointer;
            /*color: ;*/
        }
    </style>
</head>
<body>
<div id="main_C" style="float: left;width: 100%"  class="animated fadeInRight">
    <div class="title_info">
        <span>来电记录</span>
        <span onclick="add_record()" style="float: right"><a class="record_build">记录创建+</a></span>
    </div>
    <div class="white_bgColor notice_info">
        <!--顶部选项-->
        <ul class="feedback_ul">
            <li><a href="javascript:void(0);" class="a_active">来电记录</a></li>
            <li><a href="javascript:void(0);">去电记录</a></li>
        </ul>

        <!--来电记录-->
        <div class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <!--<th>手机号</th>-->
                    <th>响铃时间</th>
                    <th>接听时间</th>
                    <th>通话结束时间</th>
                    <th>通话时长</th>
                    <th>接听状态</th>
                    <th>反馈类别</th>
                    <th>省</th>
                    <th>市</th>
                    <th>坐席负责人</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="t_lst1" class="animated fadeInRight">


                </tbody>
            </table>
            <div id="pageone" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page1"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>
        </div>

      <div style="display: none" class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>响铃时间</th>
                    <th>接听时间</th>
                    <th>通话结束时间</th>
                    <th>通话时长</th>
                    <th>接听状态</th>
                    <th>坐席负责人</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="t_lst2" class="animated fadeInRight">

                </tbody>
            </table>
            <div id="pagetwo" style="width: 1200px;text-align: center;margin: 100px auto 0">
                <ul class="pagination" id="page2"></ul>
                <div class="pageJump">
                    <span>跳转到</span>
                    <input type="text"/>
                    <span>页</span>
                    <button type="button" class="button"></button>
                </div>
            </div>
        </div>
</div>
</div>
</div>
<script src="/Public/js/jquery-3.2.1.js"></script>
<script src="/Public/js/bootstrap.min.js"></script>
<script src="/Public/js/pager.js"></script>
<script src="/Public/js/layer/layer.js"></script>
<script src="/Public/js/layui/layui.js"></script>
<script>
    var vid=window.parent.get_vid();
    var url = "<{$SERVER_NAME}>/UserCenter/call_in_record";
    get_call_in(1);
    console.log('vvvvvvvvvv',vid);
    function get_call_in(page) {
        $.post(url, {page: page,vid:vid}, function (data){
            console.log('666666',data);
            if (data.code == '1001') {
                var obj = data.result;
                var s = "";
                var len = obj.length;
                /*分页*/
                if(page==1){
                    Page({
                        num: data.tol,					//页码数
                        startnum:1,				//指定页码
                        elem: $('#page1'),		//指定的元素
                        callback: function (n) {	//
                            get_call_in(n);
                        }
                    });
                    if (data.count <=10) {
                        $("#pageone").hide();
                    } else {
                        $("#pageone").show();
                    }
                }
                for (var i = 0; i < len; i++) {
                    s += " <tr>" +
                        " <td>" + obj[i].ring + "</td> " +
                        "<td>" + obj[i].begin + "</td>" +
                        "<td>" + obj[i].end + "</td> " +
                        "<td>" + obj[i].talk_time + "</td> " +
                        "<td>" + obj[i].state + "</td> " +
                        "<td>" + obj[i].cate + "</td> " +
                        "<td>" + obj[i].province + "</td> " +
                        "<td>" + obj[i].district + "</td> " +
                        "<td>" + obj[i].admin + "</td>" +
                        "<td><a href='javascript:void(0);' onclick='see_feedback(this,"+obj[i].id+",1)'>查看反馈</a></td> " +
                        " </tr>";
                    s+="<tr><td colspan='6'><div class='' style='display:none; width: 100%'  id='feedback"+obj[i].id+"'> " +
                        " <a class='audio'><audio  src='"+ obj[i].voice_url +"' controls='controls'></audio></a> "+
                        "<span style='text-overflow: nowrap ;display:block; '>通话记录: "+obj[i].content+"</span>"+
                        " </div></td></tr>";
                    // s+="<tr><td colspan='9'><div class='' style='display:none; width: 100%'  id='feedback"+obj[i].id+"'> " +
                    //     "<span style='text-overflow: nowrap ;display:block; '>用户反馈: "+obj[i].content+"</span>" +
                    //     " </div></td></tr>";
                }
                    document.getElementById("t_lst1").innerHTML = s;
            } else {

            }
        });
    }


    function see_feedback(obj,id,type) {
        if(type==1){//来电记录
            var show="#feedback"+id;
            $(show).fadeToggle(500);
        }else if(type==2){//去电记录
            var show="#out_feedback"+id;
            $(show).fadeToggle(500);
        }

    }


    function get_call_out(page) {
        var url = "<{$SERVER_NAME}>/UserCenter/call_out_record";
        $.post(url, {page: page,vid:vid}, function (data){
            console.log('666666',data);
            if (data.code == '1001') {
                var obj = data.result;
                var s = "";
                var len = obj.length;
                /*分页*/
                if(page==1){
                    Page({
                        num: data.tol,					//页码数
                        startnum:1,				//指定页码
                        elem: $('#page2'),		//指定的元素
                        callback: function (n) {	//
                            get_call_out(n);
                        }
                    });
                    if (data.count <=10) {
                        $("#pagetwo").hide();
                    } else {
                        $("#pagetwo").show();
                    }
                }

                for (var i = 0; i < len; i++) {
                    s += " <tr>" +
                        " <td>" + obj[i].ring + "</td> " +
                        "<td>" + obj[i].begin + "</td>" +
                        "<td>" + obj[i].end + "</td> " +
                        "<td>" + obj[i].talk_time + "</td>" +
                        "<td>" + obj[i].state + "</td> " +
                        "<td>" + obj[i].admin + "</td>" +
                        "<td><a href='javascript:void(0);' onclick='see_feedback(this,"+obj[i].id+",2)'>查看记录</a></td> " +
                        " </tr>";
                    s+="<tr><td colspan='6'><div class='' style='display:none; width: 100%'  id='out_feedback"+obj[i].id+"'> " +
                            " <a class='audio'><audio  src='"+ obj[i].voice_url +"' controls='controls'></audio></a> "+
                        "<span style='text-overflow: nowrap ;display:block; '>通话记录: "+obj[i].content+"</span>"+
                        " </div></td></tr>";
                }
                document.getElementById("t_lst2").innerHTML = s;
            } else {
            }
        });
    }

    /*备注*/
    $(document).ready(function () {
        $(".remark_btn").click(function () {
            $(".remark_div").fadeToggle(500);
        });
    });

    //选项卡切换
    $(document).ready(function () {
        $(".feedback_ul li").click(function () {
            $(".search_table").hide().eq($(this).index()).show();
            $(".feedback_ul").find("li a").removeClass("a_active");
            $(this).children("a").addClass("a_active");

            var index = $(this).index() + 1;//获取索引
            switch (index){
                case 1:
                    get_call_in(1);
                    break;
                case 2:

                    get_call_out(1);
                    break;
            }
        });
    });

    function add_record() {
       var phone=window.parent.phone_g;
        var callid=window.parent.callid_g;
        console.log('callid',callid+'==='+phone);
        window.location.href="<{$SERVER_NAME}>/User/add_tel_record?phone="+phone+"&callid="+callid;

    }


    var playing = false, currentAudio = null;
    $(".audio").on("click", function () {
        console.log('1212');
        var $audio = $(this).find("audio");
        if (playing) {
            playing = false;
            currentAudio.pause();
            currentAudio.currentTime = 0;
            currentAudio = null;
        }
        playing = true;
        currentAudio = $audio.get(0);
        currentAudio.play();
    });
</script>

</body>
</html>